﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../../js/jq/jquery.lastest.js"></script>
    <script src="../../../js/ko/knockout.lastest.js"></script>

    <script src="../../../js/core/jquery.splitter.js"></script>
    <script src="../../../js/core/CCSV.js"></script>

    <link href="../../../css/pure/pure.lastest.css" rel="stylesheet" />
    <style type="text/css">
        body
        {
            font-size: 12px;
        }

        .pure-form-aligned .pure-control-group label
        {
            width: 140px;
            text-align: left;
        }
    </style>
    <script src="js/index.js"></script>

    <script type="text/javascript">
        function CPortfolio(code, name, password, birthdate, national, favorite) {
            self = this;
            self.Code = ko.observable(code);
            self.Name = ko.observable(name);
            self.Password = ko.observable(password);
            self.Birthdate = ko.observable(birthdate);
            self.IssueDate = ko.observable();
            self.National = ko.observable(national);
            self.Favorite = ko.observableArray(favorite);
        }

        function CPortfolioViewModel(port) {
            //-----------------------------------------------------
            // Properties
            //-----------------------------------------------------
            self = this;
            self.Portfolio = port;

            self.Nationals = ko.observableArray();
            self.Favorites = ko.observableArray();

            //-----------------------------------------------------
            // Behaviours.Client
            //-----------------------------------------------------
            self.showInfo = function (model, event) {                
                console.log('showInfo(model, event)');
                console.log('   + model', model);
                console.log('   + event', event);
                console.log('   + toJSON', ko.toJSON(self.Portfolio));
                alert(ko.toJSON(self.Portfolio));
            };
            
            self.isValid = ko.observable(true);
            self.validateMessage = ko.observable('---');
            self.validate = function () {
                self.isValid(true);
                self.validateMessage = ko.observable('--');
                if (typeof self.Portfolio.Birthdate() != 'undefined') {
                    if (typeof self.Portfolio.IssueDate() != 'undefined') {
                        var start = new Date(self.Portfolio.Birthdate());
                        var end = new Date(self.Portfolio.IssueDate());
                        var diff = new Date(end - start);
                        var age = parseInt(diff / 1000 / 60 / 60 / 24 / 365);
                        if (age < 18) {
                            self.validateMessage('Not enough 18 years old !!!');
                            console.log(self.validateMessage());
                            self.isValid(false);
                        }                        
                    }                    
                }
                return true;
            }

            //-----------------------------------------------------
            // Behaviours.CallServer
            //-----------------------------------------------------
            self.init = function () {
                $.post('service/data.ashx',
                    { action: 'getInfo' },
                    function (data) {
                        var list = data.CSV2JSON2();
                        self.Nationals(list[1]);
                        self.Favorites(list[2]);

                        self.Portfolio.Birthdate.subscribe(function (date) {
                            self.validate();
                        });
                        self.Portfolio.IssueDate.subscribe(function (date) {
                            self.validate();
                        });

                        ko.applyBindings(self);
                    });
            };
            self.getByID = function (id) {
            };
            self.save = function () {
            };
        }

        $(function () {
            var port = new CPortfolio("Bill", "Thiên Tuấn", "123456", "2006-03-20", 2, ['1','3']);
            var portVM = new CPortfolioViewModel(port);
            portVM.init();
        });
    </script>
</head>
<body>
    <form class="pure-form pure-form-aligned">
        <fieldset>
            <legend>Portfolio Information</legend>
            <div class="pure-control-group">
                <label>
                    Code:
                </label>
                <input type="text" title="Code" class="wMid" data-bind="value: Portfolio.Code" />
            </div>
            <div class="pure-control-group">
                <label>
                    Name:
                </label>
                <input type="text" title="Name" class="wLong" data-bind="value: Portfolio.Name" />
            </div>
            <div class="pure-control-group">
                <label>
                    Password:
                </label>
                <input type="password" class="wMid" data-bind="value: Portfolio.Password" />
            </div>
            <div class="pure-control-group">
                <label>
                    Birth date:
                </label>
                <input type="date" class="wLong" data-bind="value: Portfolio.Birthdate, valueUpdate:'change'" />
            </div>
            <div class="pure-control-group">
                <label>
                    Issue date:
                </label>
                <input type="date" class="wLong" data-bind="value: Portfolio.IssueDate" />
            </div>
            <div class="pure-control-group">
                <label>
                    National:
                </label>
                <select class="wLong" data-bind="options: Nationals, 
                                                    value: Portfolio.National, 
                                                    optionsCaption: 'Select an item...',
                                                    optionsValue:'ID', 
                                                    optionsText: 'Name'"></select>
            </div>
            <div class="pure-control-group">
                <label>
                    Favorite:
                </label>
                <select class="wLong" multiple="multiple" data-bind="options: Favorites, 
                                                                        selectedOptions: Portfolio.Favorite, 
                                                                        optionsValue:'ID', 
                                                                        optionsText: 'Name'">
                </select>
            </div>
            <div class="pure-control-group">
                <label>&nbsp;</label>
                <input type="button" value="Save" data-bind="click: save" class="pure-button pure-button-primary" />
                <input type="button" value="Show Info" data-bind="click: showInfo, 
                                                                    enable: isValid" class="pure-button pure-button-primary" />
            </div>
            <div class="pure-control-group">
                <label>&nbsp;</label>
                <div class="button-error" data-bind="text: validateMessage"></div>
            </div>
        </fieldset>
    </form>
</body>
</html>
